<template>
  <el-row>
    <el-col>
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="权限编号">
          <el-input placeholder="请输入权限编号"></el-input>
        </el-form-item>
        <el-form-item label="权限名称">
          <el-input placeholder="请输入权限名称"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select  placeholder="状态筛选">
            <el-option label="全部" value="null"></el-option>
            <el-option label="停用" value="1"></el-option>
            <el-option label="未停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <el-row>
    <el-col>
      <el-button type="success" :icon="Plus" @click="addDialog = true">新增</el-button>
    </el-col>
  </el-row>

  <el-row>
    <el-col>
      &nbsp;
    </el-col>
  </el-row>

  <el-row>
    <el-col>
      <el-table
                :data="permissions"
                style="width: 100%"
                row-key="id"
                header-cell-style="background:#f8f8f9;color:#535a6c"
      >
        <el-table-column prop="id" label="权限编号"/>
        <el-table-column prop="permissionName" label="权限名称"/>
        <el-table-column prop="url" label="权限url"/>
        <el-table-column prop="description" label="备注"/>
        <el-table-column prop="status" label="状态"/>
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template #default>
            <el-button-group class="ml-4">
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑此权限"
                  placement="top"
              >
                <el-button type="primary" :icon="Edit" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除此权限"
                  placement="top"
              >
                <el-button :icon="Delete" type="danger" size="small"></el-button>
              </el-tooltip>
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="停用此权限"
                  placement="top"
              >
                <el-button type="warning" size="small" :icon="Remove"></el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-dialog v-model="addDialog" title="添加权限" width="400px" center>
    <AddPermission></AddPermission>
  </el-dialog>

</template>
<script setup>
import {
  Search,Plus,Edit,Remove,Delete
} from '@element-plus/icons-vue'
import AddPermission from "@/view/permission/AddPermission";
</script>

<script>
import {getAllPermission} from "@/api/permssion";
export default {
  name: "PermissionPage",
  data() {
    return {
      permissions:[],
      addDialog:false
    }
  },
  mounted() {
    this.getPermission()
  },
  methods:{
    async getPermission() {
      const t = await getAllPermission();
      if (t.data.code === 200) {
        this.permissions = t.data.data
      } else {
        console.log(t.data.msg)
      }
    }
  }
}
</script>

<style scoped>

</style>